import React, { useState } from 'react';
import { ArrowLeft } from '@nutui/icons-react';
import { Input, Cell, Popup, CalendarCard } from '@nutui/nutui-react';
import { useNavigate } from 'react-router-dom';
import { Card,Button } from 'antd';
import './MaintInformation.css';
import axios from 'axios';

export default function MaintInformation() {
    let navigate = useNavigate();
    let [MaintInfo, setMaintInfo] = useState({
        address:'南航桂碧园小区A栋',
        title:JSON.parse(sessionStorage.getItem('Item')).title || '',
        type:JSON.parse(sessionStorage.getItem('Item')).type || '',
        content:''
    });
    const [visible, setVisible] = useState(false);
    const [date, setDate] = useState('');
    let addMaint = async ()=>{
        let res = await axios.post('http://localhost:3000/jwh/addMaint',{MaintInfo});
    }
    return (
        <div>
            <div className='MyHouse_top'>
                <ArrowLeft className="back-icon" width={"40px"} onClick={() => window.history.back()} />
                <span className="title-text">维修上报</span>
            </div>
            <div className='MaintInformation'>
                <Input placeholder='报修房屋' value={MaintInfo.address} />
                <Input placeholder='维修项目' value={MaintInfo.type} />
                <Input placeholder='标题' value={MaintInfo.title} />
                <Input placeholder='问题描述' value={MaintInfo.content} onChange={(e)=>setMaintInfo({...MaintInfo,content:e})} />
                <Input placeholder='联系电话' value={MaintInfo.tel} onChange={(e)=>setMaintInfo({...MaintInfo,tel:e})} />
                <Cell
                    title="点击选择日期"
                    description={date ? date.toLocaleDateString() : ''}
                    onClick={() => setVisible(true)}
                />
                <Popup
                    title="选择日期"
                    visible={visible}
                    position="bottom"
                    closeable
                    onClose={() => setVisible(false)}
                >
                    <CalendarCard
                        value={date}
                        onChange={(d) => {
                            if (d instanceof Date) {
                                setMaintInfo({...MaintInfo,time:d.toLocaleDateString()})
                                setDate(d)
                            }
                        }}
                    />
                    <div style={{ padding: '10px' }}>
                        <Button block type="danger" onClick={() => setVisible(false)}>
                            确定
                        </Button>
                    </div>
                </Popup>
                <Button size='large' color='danger' style={{ width: "80%", marginLeft: '40px' }} onClick={() =>{
                    navigate('/maint')
                    addMaint()
                    }}>提交审核</Button>
            </div>
        </div>
    );
}